<script setup lang="ts">

import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "../Components/SongBottom.vue";
import LeftList from "../Components/LeftList.vue";
import UndoRedoSearch from "../Components/UndoRedoSearch.vue";
import RightUserPhoto from "../Components/RightUserPhoto.vue";
import RecommendSvg from "@/svg/RecommendTitleSvg.vue";
import SongList from "@/Components/SongList.vue";
import router from "@/Router";
import {ref} from "vue";

let username = localStorage.getItem("username")
const sendPlayListTab = (index:number) => {
  let recObject = ref({
    rec:""
  })
  if(index==1){
    recObject.value.rec="最热歌曲"
    router.push({
      path:"/hot_listen_count_rec",
      query: recObject
    })
  }
  if(index==4){
    recObject.value.rec="为你推荐"
    router.push({
      path:"/item_rec",
      query: recObject
    })
  }
}

const pageName = "RecommendPage"

</script>

<template>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list class="h-full w-55"></left-list>
    <div class="main grow h-183 flex flex-col overflow-auto pb-15 mx-3 ml-60">
      <undo-redo-search class="w-full ml--5"></undo-redo-search>
      <div class="mt-25 h-auto flex-col ml-3 ">
        <div class="flex-col h-auto gap-y-4 text-xl">
          <div class="text-10 text-gray-7 font-bold">推荐</div>
          <div class="text-5 text-gray-7  mt-6 mb-5">嗨，{{username}}，今日为你推荐</div>
          <div class="h-40 w-full mt-2 flex items-center justify-between px-7">
            <div @click="sendPlayListTab(1)"
                 class="flex w-95 h-full p-4 bg-yellow-2  hover:bg-yellow-3 rounded-2xl">
              <div class="text-gray-5 font-light bg-white rounded-2xl h-8 flex justify-center items-center p-2 opacity-90">最热歌曲</div>
            </div>
            <div @click="sendPlayListTab(2)"
                 class="flex w-47 h-full p-4 bg-gray-2  hover:bg-yellow-1 rounded-2xl">
              <div class="text-gray-5 font-light bg-white rounded-2xl h-8 flex justify-center items-center p-2 opacity-90">最热歌手</div>
            </div>
            <div @click="sendPlayListTab(3)"
                 class="flex w-47 h-full p-4 bg-gray-2  hover:bg-yellow-1 rounded-2xl">
              <div class="text-gray-5 font-light bg-white rounded-2xl h-8 flex justify-center items-center p-2 opacity-90">最火专辑</div>
            </div>
            <div @click="sendPlayListTab(4)"
                 class="flex w-47 h-full p-4 bg-gray-2  hover:bg-yellow-1 rounded-2xl">
              <div class="text-gray-5 font-light bg-white rounded-2xl h-8 flex justify-center items-center p-2 opacity-90">为你推荐</div>
            </div>
            <div @click="sendPlayListTab(2)"
                 class="flex w-47 h-full p-4 bg-gray-2  hover:bg-yellow-1 rounded-2xl">
              <div class="text-gray-5 font-light bg-white rounded-2xl h-8 flex justify-center items-center p-2 opacity-90">最热歌手</div>
            </div>

          </div>
        </div>
      </div>
      <div class="ml-3 text-5 text-gray-7  mt-15 mb-5">随便听听</div>
      <song-list class="px-10 ml-2" :pageName="pageName"></song-list>
    </div>
  </div>
</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
</style>